<template>
  <div :class="['com-button', type?type:'']" @click="onClick">
    <slot/>
  </div>
</template>

<script>
export default {
  name: 'comButton',
  props: {
    type: {
      type: String,
      required: false
    }
  },
  methods: {
    onClick (e) {
      console.log('=======')
      this.$emit('click', e)
    }
  }
}
</script>

<style scoped lang="scss">
.com-button {
  width: 80px;
  height: 40px;
  line-height: 40px;
  background: #2d8cf0;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  &:hover {
    background: #57a3f3;
  }
  &:active {
    background: #2b85e4;
  }
}

.error {
  background: red;
  &:hover {
    background: #57a3f3;
  }
  &:active {
    background: #2b85e4;
  }
}
</style>
